<!DOCTYPE html>
<!--suppress ALL-->
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="UTF-8">
    <title>管理系统</title>
    <link rel="stylesheet" th:href="@{/css/main.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/css/button.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/css/add.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/css/update.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/css/del.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/css/examine.css}" type="text/css">
    <script th:src="@{/js/add.js}"  type="text/javascript"></script>
    <script th:src="@{/js/del.js}"  type="text/javascript"></script>
    <script th:src="@{/js/examine.js}"  type="text/javascript"></script>
    <script th:src="@{/js/flip.js}"  type="text/javascript"></script>
    <script th:src="@{/js/update.js}"  type="text/javascript"></script>
    <script>
        function enter() {
            if (event.keyCode == 13) {
                sumbit();
            }
        }
    </script>
</head>

<body onkeypress="enter()">
<div id="total">
    <div id="top">
        <div class="headerLine">—————————————</div>
        <div id="header">管理系统</div>
        <div class="headerLine">—————————————</div>
    </div>

    <div id="second">
        <button id="add" onclick="add()">新增</button>
        <button id="del" onclick="del()">删除</button>
    </div>
    <div sec:authorize="isAuthenticated()">
        <a>
            欢迎
            <span sec:authentication="principal.authorities"></span>
            <span sec:authentication="name"></span>
            登录
        </a>
    </div>

    <div id="main">
        <table cellspacing="0px" id="myTable">
            <thead>
            <tr>
                <th class="col1"><input type="checkbox" onclick="checkAll(this)"/></th>
                <th class="col2">序号</th>
                <th class="col3">账户</th>
                <th class="col4">昵称</th>
                <th class="col5">用户电话</th>
                <th class="col6">用户权限</th>
                <th class="col7">密码</th>
                <th class="col8">系别</th>
                <th class="col9">专业</th>
                <th class="col10">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="user,memberStart:${list}">
                <th><input type="checkbox" name="item"> </th>
                <th th:text="${memberStart.index}+1"></th>
                <th align="center" th:text="${user.userId}"></th>
                <th align="center" th:text="${user.userName}"></th>
                <th align="center" th:text="${user.userTel}"></th>
                <th align="center" th:text="${user.userEnabled}"></th>
                <th align="center" th:text="${user.userPassword}"></th>
                <th align="center" th:text="${user.faculty}"></th>
                <th align="center" th:text="${user.major}"></th>
                <th align="center">
                    <button id="update" onclick="update()">更新</button>
                    <button id="update" onclick="del()">删除</button>
                </th>
            </tr>
            </tbody>
        </table>
    </div>

    <div id="final">
        <p>第</p>
        <p id="pageNum">1</p>
        <P>页，共</P>
        <p id="nums">0</p>
        <p>条，(每页显示10条)</p>
        <button id="next" onclick="next()">下一页</button>
        <button id="previous" onclick="previous()">上一页</button>
    </div>

</div>

<div id="totalBackground"></div>

<div id="addBlock">
    <from>
        <div id="addHeader">新增信息</div>
        <div id="addMain">
            <table id="addMessageTable">
                <thead>
                <tr>
                    <td class="addTableTd1">账户</td>
                    <td class="addTableTd2"><input type="text" id="stuId1" name="账户"/></td>
                </tr>
                <tr>
                    <td class="addTableTd1">昵称</td>
                    <td class="addTableTd2"><input type="text" id="name1" name="昵称"/></td>
                </tr>
                <tr>
                    <td class="addTableTd1">用户电话</td>
                    <td class="addTableTd2"><input type="text" id="colg1" name="用户电话"/></td>
                </tr>
                <tr>
                    <td class="addTableTd1">用户权限</td>
                    <td class="addTableTd2"><input type="text" id="profession1" name="用户权限"/></td>
                </tr>
                <tr>
                    <td class="addTableTd1">密码</td>
                    <td class="addTableTd2"><input type="text" id="grade1" name="密码"/></td>
                </tr>
                <tr>
                    <td class="addTableTd1">系别</td>
                    <td class="addTableTd2"><input type="text" id="stuClass1" name="系别"/></td>
                </tr>
                <tr>
                    <td class="addTableTd1">专业</td>
                    <td class="addTableTd2"><input type="text" id="age1" name="专业"/></td>
                </tr>
                </thead>
            </table>
        </div>
        <div style="text-align: right; height: 35px; padding-top: 5px; padding-right: 20px">
            <button id="submit" onclick="sumbit()">提交</button>
            <button id="addCancel" onclick="addCancel()">取消</button>
        </div>
    </from>
</div>

<!--<script>-->
<!--    function aa() {-->
<!--        $.post({-->
<!--            url:"[[@{/admin/addUser]]",-->
<!--            data:{"x":$("#addBlock").val()},-->
<!--            success:function (data) {-->
<!--                if(data.toString()=='0000'){-->
<!--                    alert('添加成功');-->
<!--                }else {-->
<!--                    alert('添加失败');-->
<!--                }-->
<!--            }-->
<!--        })-->
<!--    }-->
<!--</script>-->

<div id="updateBlock">
    <div id="updateHeader">修改信息</div>
    <div id="updateMain">
        <table id="updateMessageTable">
            <tr>
                <td class="updateTableTd1">账户</td>
                <td class="updateTableTd2"><input type="text" id="stuId2" /></td>
            </tr>
            <tr>
                <td class="updateTableTd1">昵称</td>
                <td class="updateTableTd2"><input type="text" id="name2" /></td>
            </tr>
            <tr>
                <td class="updateTableTd1">用户电话</td>
                <td class="updateTableTd2"><input type="text" id="colg2" /></td>
            </tr>
            <tr>
                <td class="updateTableTd1">用户权限</td>
                <td class="updateTableTd2"><input type="text" id="profession2" /></td>
            </tr>
            <tr>
                <td class="updateTableTd1">密码</td>
                <td class="updateTableTd2"><input type="text" id="grade2" /></td>
            </tr>
            <tr>
                <td class="updateTableTd1">系别</td>
                <td class="updateTableTd2"><input type="text" id="stuClass2" /></td>
            </tr>
            <tr>
                <td class="updateTableTd1">专业</td>
                <td class="updateTableTd2"><input type="text" id="age2" /></td>
            </tr>
        </table>
    </div>
    <div style="text-align: right; height: 35px; padding-top: 5px; padding-right: 20px">
        <button id="preservation" onclick="preservation()">保存</button>
        <button id="updateCancel" onclick="updateCancel()">取消</button>
    </div>
</div>

<div id="examineBlock">
    <div id="examineHeader">查看信息</div>
    <div id="examineMain">
        <table id="examineMessageTable">
            <tr>
                <td class="examineTableTd1">账户</td>
                <td class="examineTableTd2"><input type="text" id="stuId3" readonly="readonly" /></td>
            </tr>
            <tr>
                <td class="examineTableTd1">昵称</td>
                <td class="examineTableTd2"><input type="text" id="name3" readonly="readonly" /></td>
            </tr>
            <tr>
                <td class="examineTableTd1">用户电话</td>
                <td class="examineTableTd2"><input type="text" id="colg3" readonly="readonly" /></td>
            </tr>
            <tr>
                <td class="examineTableTd1">用户权限</td>
                <td class="examineTableTd2"><input type="text" id="profession3" readonly="readonly" /></td>
            </tr>
            <tr>
                <td class="examineTableTd1">密码</td>
                <td class="examineTableTd2"><input type="text" id="grade3" readonly="readonly" /></td>
            </tr>
            <tr>
                <td class="examineTableTd1">系别</td>
                <td class="examineTableTd2"><input type="text" id="stuClass3" readonly /></td>
            </tr>
            <tr>
                <td class="examineTableTd1">专业</td>
                <td class="examineTableTd2"><input type="text" id="age3" readonly /></td>
            </tr>
        </table>
    </div>
    <div style="text-align: right; height: 35px; padding-top: 5px; padding-right: 20px">
        <button id="examineCancel" onclick="examineCancel()">取消</button>
    </div>
</div>

<div id="delBlock">
    <div id="delHeader">待删除信息</div>
    <div id="delMain">
        <p>您确定删除以下信息</p>
        <p id="delMessage"></p>
    </div>
    <div style="text-align: right; height: 35px; padding-top: 5px; padding-right: 20px">
        <button id="confirm" onclick="confirm()">确认</button>
        <button id="delCancel" onclick="delCancel()">取消</button>
    </div>
</div>
</body>
</html>